<template>
  <DefaultLayout>
    <div class="space-y-12">
      <!-- 英雄区域 -->
      <section class="text-center py-20 bg-gradient-to-r from-primary to-secondary text-white rounded-lg">
        <h1 class="text-5xl font-bold mb-6">欢迎来到 Cursor 学习网站</h1>
        <p class="text-xl mb-8">探索 Cursor 的强大功能，提升您的开发效率</p>
        <div class="space-x-4">
          <router-link
            to="/tutorials"
            class="bg-white text-primary px-6 py-3 rounded-lg font-semibold hover:bg-gray-100"
          >
            开始学习
          </router-link>
          <router-link
            to="/videos"
            class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary"
          >
            观看视频
          </router-link>
        </div>
      </section>

      <!-- 特性展示 -->
      <section class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div
          v-for="feature in features"
          :key="feature.title"
          class="bg-white p-6 rounded-lg shadow-md"
        >
          <div class="text-4xl mb-4">{{ feature.icon }}</div>
          <h3 class="text-xl font-semibold mb-2">{{ feature.title }}</h3>
          <p class="text-gray-600">{{ feature.description }}</p>
        </div>
      </section>

      <!-- 最新教程 -->
      <section>
        <h2 class="text-3xl font-bold mb-6">最新教程</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div
            v-for="tutorial in latestTutorials"
            :key="tutorial.id"
            class="bg-white rounded-lg shadow-md overflow-hidden"
          >
            <img :src="tutorial.image" :alt="tutorial.title" class="w-full h-48 object-cover" />
            <div class="p-4">
              <h3 class="text-xl font-semibold mb-2">{{ tutorial.title }}</h3>
              <p class="text-gray-600 mb-4">{{ tutorial.description }}</p>
              <router-link
                :to="`/tutorials/${tutorial.id}`"
                class="text-primary font-semibold hover:underline"
              >
                阅读更多
              </router-link>
            </div>
          </div>
        </div>
      </section>
    </div>
  </DefaultLayout>
</template>

<script setup lang="ts">
import DefaultLayout from '../layouts/DefaultLayout.vue'

const features = [
  {
    icon: '📚',
    title: '全面的教程内容',
    description: '从基础到高级，系统学习 Cursor 的所有功能'
  },
  {
    icon: '🎥',
    title: '视频教程',
    description: '直观的视频演示，让学习更加生动有趣'
  },
  {
    icon: '💻',
    title: '实战案例',
    description: '真实项目案例，掌握实际应用技巧'
  }
]

const latestTutorials = [
  {
    id: 1,
    title: 'Cursor 入门指南',
    description: '了解 Cursor 的基本功能和界面操作',
    image: '/images/tutorial-1.jpg'
  },
  {
    id: 2,
    title: 'AI 辅助编程技巧',
    description: '学习如何利用 AI 提高编程效率',
    image: '/images/tutorial-2.jpg'
  },
  {
    id: 3,
    title: '快捷键大全',
    description: '掌握 Cursor 的快捷键，提升操作效率',
    image: '/images/tutorial-3.jpg'
  }
]
</script> 